<template>
  <div class="mylist">
    <div class="qianggou">
        <span :class="colors" @click="color()">正在抢购</span>
        <span  >上新预告</span>
    </div>
    <div class="list" v-for="(item,index) in list" :key="index">
        <div class="imgbox">
            <img src="https://img1.baidu.com/it/u=2820222784,2850106904&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
        </div>
        <div class="dian">
            <p class="dianming">{{item.name}}</p>
            <p class="rm">{{item.rm}}</p>
            <span class="prise">￥{{item.prose}}</span> <span class="qiang" @click="qiang(index)">{{item.qiang}}</span><br>
            <span>已售：{{item.yc}}</span>

        </div>
    </div>
   
    
  </div>
</template>

<script>
export default {
    data() {
        return {
            colors:false,
            q:0,
            list:[
                {name:"买一送一星星堡 | 用心火烧肉质紧实 鲜嫩多汁 爆爆团",rm:"爆款热卖",prose:25,qiang:"马上抢",yc:135},
                {name:"华莱士 | 聚划算单人套餐 | 遇店必选",rm:"爆款热卖",prose:12.12,qiang:"马上抢",yc:148},
                {name:"白老大小米果仁酥220g 【爆爆团】",rm:"爆款热卖",prose:12,qiang:"马上抢",yc:189},
            ]
        }
    },
    methods: {
        color(){
            this.colors=true;
        },
        qiang(index){
            this.list[index].qiang="已抢";
        }
    },
}
</script>

<style>
    .qianggou{
        width: 100%;
    }
    .qianggou>span{
        float: left;
        margin: 10px 10px;
    }
    .list{
        display: flex;
        width: 100%;
    }
    .imgbox{
        width: 80px;
        margin-top:10px ;
        margin-right: 10px;
        margin-bottom: 20px;
    }
    .list img{
        width: 100%;
    }
    .dian{
        width: 65%;
    }
    .dian>.dianming{
        font-weight: bold;
        font-size: 16px;
    }
    .dian>.qiang{
        color:white ;
        padding: 5px 10px;
        background-color: rgb(178, 16, 16);
        border-radius: 10px;
        float: right;
    }
    .dian>.prise{
        font-size: 16px;
        font-weight: bold;
        color: rgb(178, 16, 16);
    }
    .rm{
        color: rgb(178, 16, 16);
    }
    .colors{
        color: lightskyblue;
        text-decoration: underline;
    }
</style>